<template>
	<view class="content">
		<view class="main">
			<!-- 标头区域 -->
			<navigations currst="分类" style="text-align: center;"></navigations>
			<!-- <tabbar :current="1"></tabbar> -->
			<!-- 顶部搜索框区域 -->
			<view class="top_search" @click="seacher">
				<u-search bgColor="#ffffff" style="width: 100%;height: 50rpx;margin: 0 auto;" borderColor="#FBD748"
					shape="round" :showAction="false"></u-search>
			</view>
			<view class="list_tops">
				<!-- 左侧选项卡区域 -->
				<view class="list_tops_left">
					<u-loading-icon text="加载中" textSize="18" :show="shows"></u-loading-icon>
					<view :class="[current==index?'active' : 'clists']" v-for="(item,index) in childrens" :key="index"
						@click="clist(index)">
						{{item.name}}
					</view>
				</view>
				<!-- 右侧商品区域 -->
				<view class="list_tops_right">
					<view class="tops_list">
						<!-- 右侧二手全新选择区域 -->
						<view :class="[currents==index?'list_bts' : 'list_bt']" v-for="(item,index) in datalists"
							:key="index" @click="listbt(index)">
							{{item.name}}
						</view>
					</view>
					<!-- 右侧商品列表区域 -->
					<view class="btms_list">
						<u-loading-icon text="加载中" textSize="18" :show="shows"></u-loading-icon>
						<view class="class_list" v-for="(item,index) in data_ips" :key="index" @click="detilsd(index)">
							<view class="class_list_left">
								<image style="width: 100%;height: 100%; image-rendering: crisp-edges;"
									:src="image+item.images[2]" mode=""></image>
							</view>
							<view class="class_list_right">
								<p style="font-size: 35rpx;">{{item.name}}</p>
								<p style="font-size: 25rpx;line-height: 50rpx;color: #ccc;margin-top: 10rpx;">
									全新国行 | 急速发货</p>
								<p style="color: red;margin-top: 30rpx;">￥<b
										style="font-size: 40rpx;">{{item.deposit}}</b></p>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import tabbar from "../../common/tabbar/tabbar.vue";

	import navigations from "../../common/navigation/navigation.vue"
	import {
		Collent,
		Details,
		Yzas,
		Swiper,
		Kewords,
		Brand,
		Page,
		Update,
		Issue,
		Logins,
		Check,
		User,
		Setting,
		Classify,
		Search
	} from "../../api/api.js"

	export default {
		data() {
			return {
				current: '',
				currents: 0,
				datalists: [],
				childrens: [],
				data_ips: [],
				image: "https://api.jingkakeji.com",
				data_ip: [{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					},
					{
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.r0E9Qdvzbj3TdVhdH1CdOQHaHa?rs=1&pid=ImgDetMain",
						title: "首月一元 99新 ipone 16",
						types: "全新国行 | 急速发货",
						monys: 11.09
					}
				],
				shows: true,
				data_bt: [{
						name: "全新"
					},
					{
						name: "二手"
					}
				],
				data: [{
						name: "苹果"
					},
					{
						name: "华为"
					},
					{
						name: "小米"
					},
					{
						name: "OPPO"
					},
					{
						name: "vivo"
					},
					{
						name: "荣耀"
					},
					{
						name: "三星"
					},
					{
						name: "IQOO"
					},
					{
						name: "一加"
					},
					{
						name: "红米"
					}
				]
			}
		},
		beforeCreate() {

		},
		onShow() {
			this.Classifys()
			this.onfenleis()
			this.seachers()
			// this.ondings()
			// this.Classifys()
		},
		mounted() {
			// this.Classifys()
			// this.onfenleis()
			// this.seachers()
			// this.ondings()
		},
		components: {
			navigations
		},
		methods: {
			ondings(){
				let index=uni.getStorageSync("gridIndex")
				console.log(index,"indexs")
				this.current=index
				
				this.data_ips = this.childrens[index].products
				// console.log(this.childrens[index].products,"childrens")
				// this.currents=index
			},
			async Classifys() {
				let res = await Classify()
				// console.log(res, "获取商品列表及分类")
				this.datalists = res.data.data
				this.childrens = this.datalists[this.currents].children
				this.data_ips = this.childrens[0].products
				console.log(this.data_ips, "jivcoshdoigv")
				this.shows = false
				this.ondings()
			},
			async seachers() {
				let res = await Kewords()
				console.log(res)
			},
			async onfenleis() {
				let res = await Classify()
				console.log(res.data.data, "获取搜索推荐")
			},
			seacher() {
				uni.navigateTo({
					url: "/pages/classify/Search/Search"
				})
			},
			listbt(index) {
				this.currents = index
				this.childrens = this.datalists[this.currents].children

			},
			detilsd(index) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${this.data_ips[index].id}`
				})
			},
			clist(index) {
				this.current = index
				console.log(index, "商品下标")
				this.data_ips = this.childrens[index].products
			}
		}
	}
</script>

<style lang="scss">
	* {
		font-size: 30rpx;
		font-family: Microsoft JhengHei;
	}

	.content {
		width: 100vw;
		height: 94vh;
		/* position: absolute; */
		// position: relative;
		background-color: #ffffff;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top_search {
		width: 90%;
		height: 100rpx;

	}

	.list_tops {
		width: 100%;
		height: 1250rpx;
		display: flex;

	}

	.list_tops_left {
		width: 30%;
		height: 100%;
		background-color: #f6f6f6;
		color: #989B9B;
	}

	.list_tops_right {
		width: 70%;
		height: 100%;
	}

	.clists {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.active {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #ffffff;
	}

	.tops_list {
		width: 100%;
		height: 10%;
		display: flex;
	}

	.btms_list {
		width: 100%;
		height: 90%;
		overflow: scroll;
	}

	.list_bt {
		width: 150rpx;
		height: 80rpx;
		background-color: #f6f6f6;
		margin-top: 10rpx;
		margin-left: 10rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.list_bts {
		width: 150rpx;
		height: 80rpx;
		background-color: #F9D848;
		margin-top: 10rpx;
		margin-left: 10rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.class_list {
		width: 100%;
		height: 250rpx;
		margin-top: 10rpx;
		border-bottom: 1px solid #f6f6f6;
		// background-color: aqua;
		display: flex;
	}

	.class_list_left {
		width: 40%;
		height: 100%;
	}

	.class_list_right {
		width: 60%;
		height: 100%;
		// overflow-y: scroll;
	}
</style>